<template>
  <div class="app-container">
    <div class="content">
      <el-card class="box-card card1" shadow="never">
        <el-button
          icon="el-icon-plus"
          class="addBtn"
          type="primary"
          @click="
            upDataID = null;
            addGroupModal = true;
            formData = {
              defaultStatus: 0,
            };
          "
          >添加分组</el-button
        >
        <el-tree
          class="filter-tree"
          :data="dataSource"
          ref="tree"
          :render-content="renderContent"
        >
        </el-tree>
        <el-pagination
          class="pagenation"
          :page-size="filterParams.pageSize"
          layout="sizes,prev, pager, next"
          :page-sizes="[10, 20, 50]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </el-card>
      <el-card shadow="never" class="box-card card2">
        <Table :groupID="groupDetailID" />
      </el-card>
    </div>
    <el-dialog
      :title="upDataID ? '修改分组' : '添加分组'"
      :visible.sync="addGroupModal"
    >
      <el-form label-width="120px" labelPosition="right" :model="formData">
        <el-form-item label="分组名称：">
          <el-input v-model="formData.groupName"></el-input>
        </el-form-item>
        <el-form-item label="是否默认：">
          <el-radio-group v-model="formData.defaultStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="modalBtnBox">
          <el-button @click="addGroupModal = false">取消</el-button>
          <el-button type="primary" @click="addEditShortGroup">确认</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import table from "./table.vue";
import {
  getShortGroupPage,
  addShortGroup,
  updateShortGroupPage,
  deleteShortGroupPage,
} from "@/api/article";
export default {
  components: {
    Table: table,
  },
  data() {
    return {
      dataSource: [],
      total: 0,
      formData: {
        groupName: "",
        defaultStatus: 0,
      },
      filterParams: {
        pageSize: 10,
        pageNum: 1,
      },
      groupDetailID: null,
      upDataID: "",
      addGroupModal: false,
    };
  },
  mounted() {
    this.getShortGroupPage();
  },

  methods: {
    // 获取分组列表
    async getShortGroupPage() {
      let params = {
        ...this.filterParams,
      };
      let res = await getShortGroupPage(params);
      this.dataSource = res.data.list.map((item) => {
        item.label = item.groupName;
        return item;
      });
      this.groupDetailID = this.dataSource[0].id;
      this.total = res.data.total;
    },

    // 添加、修改分组
    async addEditShortGroup() {
      if (this.upDataID) {
        let params = {
          id: this.upDataID,
          ...this.formData,
        };
        await updateShortGroupPage(params);
      } else {
        await addShortGroup(this.formData);
      }
      this.$message({
        message: this.upDataID ? "修改成功" : "添加成功",
        type: "success",
      });
      this.addGroupModal = false;
      this.getShortGroupPage();
    },

    // 删除分组
    async deleteShortGroupPage() {
      this.$alert("确认删除分组?", "删除分组", {
        confirmButtonText: "确定",
        type: "warning",
        callback: async (action) => {
          if (action == "confirm") {
            this.filterParams.pageNum = 1;
            await deleteShortGroupPage(this.upDataID);
            this.$message({
              type: "success",
              message: `删除成功`,
            });
            this.getShortGroupPage();
          } 
        },
      });
    },

    openModal(data, type) {
      this.upDataID = data.id;
      if (type == "delete") {
        this.deleteShortGroupPage();
      } else {
        this.formData = {
          groupName: data.groupName,
          defaultStatus: data.defaultStatus ? 1 : 0,
        };
        this.addGroupModal = true;
      }
    },

    renderContent(h, { node, data, store }) {
      return (
        <span
          class={`custom-tree-node ${
            this.groupDetailID == data.id ? "actived" : ""
          }`}
          on-click={() => {
            this.groupDetailID = data.id;
          }}
        >
          <span>
            {node.label}
            {data.defaultStatus ? (
              <el-tag class="tag" size="small">
                默认
              </el-tag>
            ) : (
              ""
            )}
          </span>
          <span>
            <i
              class="icon edit el-icon-edit-outline"
              alt="修改"
              on-click={() => this.openModal(data, "edit")}
            />
            <i
              class="icon delete el-icon-delete"
              name="删除"
              on-click={() => this.openModal(data, "delete")}
            ></i>
          </span>
        </span>
      );
    },
    // 分页修改
    handleCurrentChange(val) {
      this.filterParams.pageNum = val;
      this.getShortGroupPage();
    },
    handleSizeChange(val) {
      this.filterParams.pageSize = val;
      this.getShortGroupPage();
    },
  },
};
</script> 

<style lang="scss" scoped>
.app-container {
  padding: 20px !important;
  .box-card {
    height: calc(100vh - 90px);
    position: relative;
    /deep/ .el-card__body {
      height: calc(100% - 70px);
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .pagenation { 
      margin-top: 10px;
    }
  }
  .addBtn {
    margin-bottom: 20px;
    margin-left: 20px;
  }

  .content {
    display: flex;
    .card1 {
      width: 300px;
    }
    .card2 {
      flex: 1;
    }
  }
  /deep/ .el-tree-node__content {
    width: 100% !important;
    display: flex;
    .custom-tree-node {
      display: flex;
      width: 100%;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      padding-right: 8px;

      .icon {
        margin-left: 10px;
      }
      .edit {
        color: #2d5fec;
      }
      .delete {
        color: red;
      }
      .tag {
        margin-left: 10px;
      }
    }
    .actived {
      background-color: rgba($color: #189fcc, $alpha: 0.2);
    }
  }
  /deep/ .el-tree-node {
    height: 35px;
  }

  .modalBtnBox {
    display: flex;
    justify-content: center;
  }
}
/deep/ input[aria-hidden="true"] {
  display: none !important;
}

/deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
  .el-radio__inner {
  box-shadow: none !important;
}
</style>
